
<template>
  <div class="home">
    <mt-button class="selectCity" @click="selectCity">
      <img src="../assets/定位.png" height="20" width="20" slot="icon" />
      {{ city }}
    </mt-button>
    <!-- 轮播图开始 -->
    <div class="swipe">
      <mt-swipe :auto="4000" style="height: 200px">
        <mt-swipe-item
          ><img src="../assets/img/swipe/swipe2.png" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="../assets/img/swipe/swipe2.png" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="../assets/img/swipe/swipe2.png" alt=""
        /></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 轮播图结束 -->

    <!-- 搜索组件 -->
    <Search></Search>

    <!-- 功能栏开始 -->
    <mt-tabbar v-model="selected" class="tagbtn">
      <mt-tab-item id="tab1" @click.native="linkTag(0)">
        <img slot="icon" src="../assets/img/tagbtn/allrenting.png" />
        租房
      </mt-tab-item>
      <mt-tab-item id="tab2" @click.native="linkTag(0)" >
        <img slot="icon" src="../assets/img/tagbtn/room.png" />
        分享
      </mt-tab-item>
      <mt-tab-item id="tab3" @click.native="linkTag(0)" >
        <img slot="icon" src="../assets/img/tagbtn/collect.png" />
        收藏
      </mt-tab-item>
      <mt-tab-item id="tab4" @click.native="linkTag(0)" >
        <img slot="icon" src="../assets/img/tagbtn/serve.png" />
        客服
      </mt-tab-item>
    </mt-tabbar>

    <!-- 功能栏结束 -->
    <div class="preview">
      <section class="section-show">
        <h3>优质房源</h3>
        <WaterFalls :isFinite="true"></WaterFalls>
      </section>

      <section class="section-show">
        <h3>热门分享</h3>
        <WaterFall :isFinite="true" :parent="self"></WaterFall>
      </section>
    </div>
  </div>
</template>
<style>
</style>
<script>
import Popup from "../components/Popup.vue";
import Search from "../components/Search";
import WaterFall from "./WaterFall.vue";
import WaterFalls from "./WaterFalls.vue";
export default {
  name: "Home",
  data() {
    return {
      self: "home",
      city: "北京",
      selected: "",
      roomsource: "房源详情",
      sharehot: "热门分享",
    };
  },
  components: {
    Search,
    Popup,
    WaterFall,
    WaterFalls,
  },
  methods: {
    selectCity() {
      this.$router.push("./city");
    },
    linkTag(i) {
      switch (i) {
        case 1:
          this.$router.push("/Renting");
          break;
        case 2:
          this.$router.push("/community");
          break;
        case 3:
          this.$router.push("/login");
          break;
        case 4:
          this.$router.push("/message");
          break;
        default: 

           this.$toast({
          message: "正在开发，敬请期待",
          // position: 'bottom',
          duration: 2000,
        });
          break
      }
    },
  },
  mounted() {
    this.$store.commit("saveRoomsource", this.roomsource);
    this.$store.commit("saveSharehot", this.sharehot);
  },
};
</script>
<style>
/* 功能栏按钮 */
.home .mint-tab-item-icon {
  width: 3rem;
  height: 3rem;
}
.home .mint-tab-item-label {
  font-size: 1.1rem;
}

.home .tagbtn {
  bottom: unset;

  top: 230px;
  font-weight: 200;
  width: 90%;
  margin: auto;

  background-image: none;
}

/* 搜索框 */
.home .mint-searchbar {
  /* background-color: #fff; */
  padding: 0;
}
.home .mint-search {
  border-radius: 30px;
  width: 80%;
  margin: auto;
  margin-top: -22px;
  box-shadow: 0px 3px 18px -5px;
}
.home .mint-searchbar-inner {
  border-radius: 20px;
  width: 100%;
}
/* 轮播图 */
.home .mint-swipe img {
  width: 100%;
}
/* 城市选择 */
.home .selectCity {
  color: #000;
  position: absolute;
  z-index: 999999;
  background-color: rgba(1, 1, 1, 0);
  border: none;
}
.home .mint-button--default {
  box-shadow: none;
}
/* 模块排版 */
.home .preview {
  margin: 8rem 0.5rem;
}
.home .section-show {
  margin: 4rem 0rem;
}
.home .section-show h3 {
  border-left: solid 2px #007d65;
  padding: 0 0.4rem;
  margin: 1rem 1rem;
}
</style>


